<template>
    <div :class="clazz" @click="onClick">
        <slot></slot>
    </div>
</template>
<script setup>
import { computed } from 'vue'
const props = defineProps({
    theme: {
        type: String,
        default: () => {
            return 'highlight'
        }
    }
})

const clazz = computed(() => {
    return `header-button ${props.theme}`
})

const emit = defineEmits(['click'])
const onClick = () => {
    emit('click')
}
</script>
<style lang="less" scoped>
.header-button {
    height: 36px;
    padding: 0 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 2;
}
.highlight {
    color: #fff;
    :deep(a) {
        color: #fff;
        &:hover {
            text-decoration: underline;
        }
    }
}
.dark {
    color: #000;
    :deep(a) {
        color: #000;
        &:hover {
            color: #1890ff;
        }
    }
}
.highlight:hover {
    background: hsla(0, 0%, 100%, 0.3);
}
.dark:hover {
    background-color: rgba(0, 0, 0, 0.05);
}
</style>
